//运用ajax请求，动态创建元素
$(function(){
	$.ajax({
		url:"js/interested.json",
		type:"post",
		data:null,
		success:function(data){
			var arr=data;
			for(var i=0;i<arr.length;i++){
				//将字符串转为数组
				var str=arr[i].bgurl;
				var arr2=(str.substr(1, str.length - 2)).split(",");
				var str1=arr[i].pobg;
				var arr3=(str1.substr(1, str1.length - 2)).split(",");
				var str2=arr[i].des;
				var arr4=(str2.substr(1, str2.length - 2)).split(",");
				var str3=arr[i].money;
				var arr5=(str3.substr(1, str3.length - 2)).split(",");
				//遍历arr,动态创建div.intlpage
				var intlpage=$("<div></div>");
				//遍历arr[i]对象中，对应属性的属性值（数组),动态添加其他元素
				for(var j=0;j<arr2.length;j++){
					var dl=$("<dl></dl>");
					dl.addClass("intdl");
					var dt=$("<dt></dt>");
					dt.addClass("intdt");
					dt.css("background","url("+arr2[j]+") no-repeat center");
					var intdta=$("<a href='#'></a>");
					intdta.addClass('intdta');
					var intpic=$("<span></span>");
					intpic.addClass("intpic");
					intpic.css("background","url("+arr3[j]+") no-repeat");
					dt.append(intdta);
					dt.append(intpic);
					var dd=$("<dd></dd>");
					dd.addClass("intdd");
					var intdda=$("<a href='#'></a>");
					intdda.addClass('intdda');
					intdda.text(arr4[j]);
					var intdds=$("<b></b>");
					intdds.addClass("intdds");
					intdds.text("￥ "+arr5[j]+".00");
					dd.append(intdda);
					dd.append(intdds);
					dl.append(dt);
					dl.append(dd);
					intlpage.append(dl);
					if(i==0){
						dt.children("span").css("display","none");
					}
				}
				if(i==0){
					intlpage.addClass("intlpage").css("display","block");
				}else{
					intlpage.addClass("intlpage")
				}
				$(".intldown").append(intlpage);
			}
		}
	})
	
	//绑定li鼠标进入事件
	$(".intltop>li").each(function(index,ele){
		$(ele).on("mouseenter",function(){
			$(ele).addClass("intwhite").siblings().removeClass("intwhite");
			$(".intldown div").eq(index).css("display","block").siblings().css("display","none");
		})
	})
	
	//.intright鼠标移入事件
	var bleft="";
	var get=0;
	bleft=setInterval(function(){
		get++;
		if(get==$(".introli").length){
			get=0;
			$(".intrul").stop().animate({
				left:0
			},100)
		}
		$(".introli").eq(get).addClass("intrget").siblings().removeClass("intrget");
		$(".intrul").animate({
			left:-($(".intrul").children().width())*get+"px"
		},500)
	},3000)
	//鼠标移入移出.intright事件
	$(".intright").hover(
		//移入,清除定时器
		function(){
			clearInterval(bleft);
			get=$(".get").index();
			$(".intrul").stop().css("left",-($(".intrul").children().width())*get);
		},
		//移出启动定时器
		function(){
			bleft=setInterval(function(){
				get++;
				if(get==$(".introli").length){
					get=0;
					$(".intrul").stop().animate({
						left:0
					},100)
				}
				$(".introli").eq(get).addClass("intrget").siblings().removeClass("intrget");
				$(".intrul").animate({
					left:-($(".intrul").children().width())*get+"px"
				},500)
			},3000)
		}
	)
	
	//.introli鼠标移入事件
	$(".introli").on("mouseenter",function(){
		clearInterval("bleft");
		$(this).addClass("intrget").siblings().removeClass("intrget");
		get=$(this).index();
		$(".intrul").stop().animate({
			left:-($(".intrul").children().width())*get+"px"
		},500)
	})
	
})
